<template>
    <transition name="fade">
    <div class="container">
        <div class="header">
            <a class="left" v-on:click="back()"><img src="../../assets/back.png" ></a>
            <a class="center">编辑收货地址</a>
        </div>
        <div class="m-box" style="margin-top: 60px;">
            <div class="label">收件人</div>
            <div class="content"><input class="input" placeholder="输入你的姓名/称呼"></div>
        </div>
        <div class="m-box">
            <div class="label">联系电话</div>
            <div class="content"><input class="input" placeholder="输入你的手机号码/固话"></div>
        </div>
        <div class="m-box ft-addon" v-on:click="chooseAddr()">
            <div class="label" >选择地区</div>
            <div class="content">{{text}}</div>
        </div>
        <div class="m-box">
            <div class="label">详细地址</div>
            <div class="content"><input class="input" placeholder="输入区/街道/门牌号"></div>
        </div>
        <div class="m-box">
            <div class="label">邮政编码</div>
            <div class="content"><input class="input" placeholder="输入邮政编码"></div>
        </div>
        <a  class="btn-submit" >保存地址</a>
        <picker  v-model="show" :data-items="cityItems" @change="onAddrChange">
            <div class="top-content" slot="top-content"><a class="pull-left" v-on:click="closeAddr">关闭</a> <a class="pull-right" v-on:click="confirmAddr">确定</a></div>
        </picker>
    </div>
    </transition>
</template>

<script>
	import picker from 'vue-3d-picker';
	import city_json from '@/assets/js/city.json';
	let cities=city_json.result.city;
export default {
    name: 'address_edit',
    data () {
        return {
			show:false,
			cityItems:[],
			text:'',
            temp_text:'',
			city_data:cities,
			lastProvince:0
        }
    },
	mounted()
	{
		let provinces = [],
			lastProvince = 0;
		for (let name in this.city_data) {

			if (this.city_data.hasOwnProperty(name)) {

				provinces.push(name);
			}
		}
		lastProvince = provinces[0];
		this.cityItems = [{
			width: '40%',
			values: provinces
		}, {
			name: 'name',
			width: '60%',
			values: this.city_data[lastProvince]
		}];

		this.lastProvince = lastProvince;
	},
    methods:{
		back:function ()
		{
			this.$router.back();
		},
		chooseAddr:function ()
		{
			this.show=true;
		},
		closeAddr:function ()
		{
			this.show=false;
		},
		confirmAddr:function ()
		{
			this.text=this.temp_text;
			this.show=false;
		},
		onAddrChange:function (province,city)
		{
			city = city.name;
			this.cityItems[1].values = this.city_data[province];
			this.temp_text = province + ', ' + city;
		}
    },
	components:{
		'picker':picker
	}
}
</script>

<style scoped>
    .top-content{
        padding: 10px;
        overflow: hidden;
        background: #fff;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .top-content a{
        color: #ff4900;
    }
</style>
